<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 水平表单</title>
 	<link rel="stylesheet" href="../components/bootstrap/dist/css/bootstrap.min.css">  
	<link rel="stylesheet" href="../components/datetimepicker/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../components/bootstrapValidator/css/bootstrapValidator.css" type="text/css" />
	<script type="text/javascript" src="../components/jquery2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="../components/bootstrap/dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../components/datetimepicker/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../components/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script src="../components/bootstrapValidator/js/bootstrapValidator.js"></script>
    
</head>
<body>


<div id="myTabContent" class="tab-content">
	
	<!--一级预约界面  -->
	<div id="testDriveAppointmentForm" class="container formValidate tab-pane fade" style="padding: 10px 10px 0px 10px"
	                 data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
	                 data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
	                 data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
	
		<div class="panel panel-default">
		    <div class="panel-body">
		       <center><h4>请选择预约车型<a class="selectModel" href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></h4></center>
		    </div>
		</div>
		
		
		<div class="form-group has-feedback">
		  <input type="text" name="xm" style="padding: 6px 40px" 
		            class="form-control"
		            placeholder="请输入姓名"
					required
	                         data-bv-notempty-message="此项必填">
		  <span class="glyphicon glyphicon-user form-control-feedback" style="left:0;"></span>
		</div>
		
		
		<div class="form-group has-feedback">
		  <input type="text" name="phone" id="inputWarning2" style="padding: 6px 40px"
		             class="form-control" 
		             placeholder="请输入手机号码"
					required
	                         data-bv-notempty-message="此项必填">
		  <span class="glyphicon glyphicon-phone form-control-feedback" style="left:0;"></span>
		</div>
		
		<div class="form-group has-feedback">
		    <select class="form-control" style="padding: 6px 40px">
		      <option value="">请选择您的销售顾问</option>
		    </select>
		    <span class="glyphicon glyphicon-user form-control-feedback" style="left:0;"></span>
	    </div>
	    
	    <!-- <div class="form-group">
	        <div class="input-group date form_datetime" data-date="1979-09-16T05:25:07Z" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1">
	            <input class="form-control" placeholder="选择到店时间" type="text" value="" readonly style="padding: 6px 40px">
			    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
		        <span class="glyphicon glyphicon-time form-control-feedback" style="left:0;"></span>
	        </div>
	    </div> -->
	    
		<div class="form-group has-feedback">
	      <input size="16" type="text" value="" placeholder="选择到店时间" readonly class="form-control form_datetime" style="padding: 6px 40px">
		  <span class="glyphicon glyphicon-time form-control-feedback" style="left:0;"></span>
		</div>
	            
	            	
		<!-- <div class="form-group has-success has-feedback">
		  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
		  <div class="input-group">
		    <span class="input-group-addon">@</span>
		    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
		  </div>
		  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
		  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
		</div>	
		
		<div class="form-group has-success has-feedback">
		  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
		  <div class="input-group">
		    <span class="input-group-addon">联系人</span>
		    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
		  </div>
		  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
		  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
		</div> -->	
		
		<div class="form-group">
		    <textarea class="form-control" rows="3" placeholder="请输入您要提交的内容"></textarea>
	    </div>
	    
		
		<p>
		  <button id="immediatelyAppoint" type="button" class="btn btn-primary btn-block">立即预约</button>
	    </p>
		
	</div>
	
	<!--二级选择车车系页面  -->
	<div id="carModelExhibitionDiv" class="container tab-pane fade">
	</div>
	
	<!--三级选择具体车系页面  -->
	<div id="carModelExhibitionDetailDiv" class="container tab-pane fade">
			<div class="panel panel-default">
			    <div class="panel-body">
			       <div class="container">
					   <div class="row">
					      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">预约车型</div>
					      <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8""><a class="selectModel" href="#">宝马5系<span class="glyphicon glyphicon-chevron-right"></span></a></div>      
					   </div>
				   </div>
			    </div>
			</div>
	        <h4>选择预约车型</h4>
	        <ul class="list-group">
			    <a href="#" class="list-group-item active">
			       2.0T
	            </a>
			    <a href="#" onclick="selectModelConcreteSeries(this)" class="list-group-item">
			  	  <span class="glyphicon glyphicon glyphicon-heart form-control-feedback"></span>
			  	       宝马3x系 2017款 528Li领先型
	            </a>
			    <a href="#" onclick="selectModelConcreteSeries(this)" class="list-group-item">
			  	  <span class="glyphicon glyphicon glyphicon-heart form-control-feedback"></span>
			  	       宝马3x系 2017款 528Li豪华设计套装
	            </a>
			    <a href="#" onclick="selectModelConcreteSeries(this)" class="list-group-item">
			  	  <span class="glyphicon glyphicon glyphicon-heart form-control-feedback"></span>
			  	       宝马3x系 2017款 530Le
	            </a>
	        
	        </ul>
	</div>
	
	
</div>


 <script type="text/javascript">
 
	 $(document).ready(function(){
		 
		 
		 $('.form_datetime').datetimepicker({
			 language: 'zh-CN',
		     weekStart: 1,
		     todayBtn:  1,
				autoclose: 1,
				todayHighlight: 1,
				startView: 2,
				forceParse: 0,
		     showMeridian: 1
		 });
		 
		 $("#immediatelyAppoint").click(function(){
		   	 $('#testDriveAppointmentForm').bootstrapValidator('validate');
		     var isValid=$("#testDriveAppointmentForm").data("bootstrapValidator").isValid();

		     if(!isValid){
		     	return;
		     }
			 
		 });
		 
		 
	     $("#testDriveAppointmentForm").addClass("active in");
	     $("#carModelExhibitionDiv").removeClass("active in");
		 $("#carModelExhibitionDetailDiv").removeClass("active in");

	     //选择车型
	     $(".selectModel").click(function(){
	    	 
		   	  for(var i=0;i<10;i++){
				  
				  var htmlUl = '<h4>宝马'+i+'</h4>'+
				   '<ul class="list-group">'+
						  '<a href="#" onclick="selectModeSleries(this)" class="list-group-item">'+
							  '<span class="glyphicon glyphicon-chevron-right form-control-feedback"></span>'+
							  '宝马3x系'+
				          '</a>'+
						  '<a href="#" onclick="selectModeSleries(this)" class="list-group-item">'+
							  '<span class="glyphicon glyphicon-chevron-right form-control-feedback"></span>'+
							  '宝马3x系'+
					      '</a>'+
						  '<a href="#" onclick="selectModeSleries(this)" class="list-group-item">'+
							  '<span class="glyphicon glyphicon-chevron-right form-control-feedback"></span>'+
							  '宝马3x系'+
						  '</a>';
				   '</ul>';
	
		    	  $("#carModelExhibitionDiv").append(htmlUl)
		    	  
		      }

		     $("#testDriveAppointmentForm").removeClass("active in");

		     $("#carModelExhibitionDiv").addClass("active in");
	     });
	 });
	 
	 
	 
	 //车型列表页面选择车系
	 function selectModeSleries(){
		 $("#carModelExhibitionDetailDiv").addClass("active in");
	     $("#testDriveAppointmentForm").removeClass("active in");
	     $("#carModelExhibitionDiv").removeClass("active in");
	 }
	 
	 //车型列表页面选择具体车系
	 function selectModelConcreteSeries(){
	     $("#carModelExhibitionDiv").removeClass("active in");
		 $("#carModelExhibitionDetailDiv").removeClass("active in");
	     $("#testDriveAppointmentForm").addClass("active in");
	 }
	
	 
	 

 </script>
</body>
</html>